<!DOCTYPE HTML>
<!-- 
  This example is used mainly for developers to test performance issues by controlling number of groups, 
  number of items and their types.
 -->
<html>

<head>
  <title>Timeline | onTimeout example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="../../dist/timeline.js"></script>
  <link href="../../dist/timeline.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="visualization"></div>
</body>

<script>
  var now = moment();
  var itemCount = 300;

  var types = ['point', 'range', 'box']
  // create a dataset with items
  var items = new timeline.DataSet();
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 180, 'days');
    var end = start.clone().add(Math.random() * 30, 'days');
    items.add({
      id: i,
      type: types[Math.floor(Math.random() * types.length)],
      content: '' + i,
      start: start,
      end: end
    });
  }

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    stack: true,
    onTimeout: {
      timeoutMs: 10,
      callback: function(callback) {
        var didUserCancel;
        var didUserCancel = confirm("Too many items loaded! Would you like to continue rendering (this might take a while)?");
        callback(didUserCancel)
      },
    }
  };

  var timeline = new timeline.Timeline(container, items, options);
</script>

</html>